<template>
    <div>
        <!-- <ul  id="nav" v-show="$route.path != '/login' && $route.path != '/reg'">
            <li :class="{ active: currentPath == item.path }"
             v-for="item in list"
              :key="item.id"
               @click="change(item.path)">
               
              <router-link :to="item.path">{{ item.name }}
                  </router-link></li>
        </ul>         -->
        <van-tabbar v-model="active"  id="nav" v-show="$route.path != '/login' && $route.path != '/reg'">
            <van-tabbar-item :class="{ active: currentPath == item.path }"
             v-for="item in list"
              :key="item.id"
               @click="change(item.path)"
                :icon="item.icon"><router-link :to="item.path">{{ item.name }}
                  </router-link></van-tabbar-item>
        </van-tabbar>
    </div>
</template>

<script>
export default {
    data() {
        return {
            active:0,
            currentPath:"/home",
            list:[
                {
                    id:1,
                    name:"首页",
                    path:"/home",
                    icon:"bag-o"
                },
                {
                    id:2,
                    name:"分类",
                    path:"/list",
                    icon:"label-o"
                },
                {
                    id:3,
                    name:"购物车",
                    path:"/cart",
                    icon:"shopping-cart-o"
                },
                {
                    id:4,
                    name:"会员中心",
                    path:"/mine",
                    icon:"user-o"
                },
                {
                    id:5,
                    name:"在线咨询",
                    path:"/talk",
                    icon:"chat-o"
                },
            ]
            
        }
    },

    comments:{},

    methods:{
        change(path) {
            this.currentPath = path;
        },        
    },

    watch:{
        $route : {
            deep :true,
            handler(newRoute) {
                this.currentPath = newRoute.path;
            }
        }
    },
}
</script>

<style lang="scss" scoped>
@import '../assets/sass/commom.scss';
@import '../assets/sass/vw.scss';
body{
    width: 100vw;
    height: 100vh;
    #nav{
        width: 100vw;
        height: vw(120);
        position: fixed;
        left: 0;
        bottom: 0;
        background: rgba($color: #ccc, $alpha: 0.7);
        li{
            float: left;
            list-style: none;
            width: 20%;
            text-align: center;
            line-height: vw(120);
            &.active{
                color: goldenrod;
                background: lightcoral;
            }
        }

    }
}    
</style>